<template>
  <section class="content" id="content">
    <!-- 检索条件 -->
    <el-form id="search" :inline="true">
      <el-form-item label="开始日期：">
        <el-date-picker
            v-model="searchForm.dutyStartDate"
            type="date"
            placeholder="请输入开始日期"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="结束日期：">
        <el-date-picker
            v-model="searchForm.dutyEndDate"
            type="date"
            placeholder="请输入结束日期"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input v-model="searchForm.dutyPersonName" clearable placeholder="值班人姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系电话：">
        <el-input v-model="searchForm.telephone" clearable placeholder="联系电话"></el-input>
      </el-form-item>
    </el-form>
    <!-- 功能按钮 -->
    <div class="handler" id="tools">
      <el-button type="primary" @click="handleQuery">查询</el-button>
      <el-button type="warning" size="small" @click="onExport">导出</el-button>
      <el-button type="success" @click="downExcelTempate">下载模板</el-button>
      <el-button type="warning" size="small" @click="handleImport">导入</el-button>
      <el-button type="danger" @click="handleRemove">批量删除</el-button>
    </div>
    <!-- 数据列表 -->
    <div id="table">
      <el-table size="default" :data="tableData" v-loading="loading" :border="true"
                :header-cell-style="{ background: '#e1eaf6 ', color: '#333333' }" :stripe="true"
                @selection-change="selectionChange" highlight-current-row>
        <el-table-column prop="id" type="selection" width="60"/>
        <el-table-column type="index" label="序号" width="60"/>
        <el-table-column label="园区名称" prop="parkName" show-overflow-tooltip min-width="150">
        </el-table-column>
        <el-table-column prop="dutyDate" label="值班日期" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column label="白班" align="center">
          <el-table-column prop="dayHeadName" label="带班领导" show-overflow-tooltip min-width="150"></el-table-column>
          <el-table-column prop="dayHeadPhone" label="手机号码" show-overflow-tooltip min-width="150"></el-table-column>
          <el-table-column prop="day1Name" label="值班员1" show-overflow-tooltip min-width="150"></el-table-column>
          <el-table-column prop="day1Phone" label="手机号码" show-overflow-tooltip min-width="150"></el-table-column>
          <el-table-column prop="day2Name" label="值班员2" show-overflow-tooltip min-width="150"></el-table-column>
          <el-table-column prop="day2Phone" label="手机号码" show-overflow-tooltip min-width="160"></el-table-column>
        </el-table-column>
        <el-table-column label="夜班" align="center">
          <el-table-column prop="nightHeadName" label="带班领导" show-overflow-tooltip
                           min-width="160"></el-table-column>
          <el-table-column prop="nightHeadPhone" label="手机号码" show-overflow-tooltip
                           min-width="160"></el-table-column>
          <el-table-column prop="night1Name" label="值班员1" show-overflow-tooltip min-width="160"></el-table-column>
          <el-table-column prop="night1Phone" label="手机号码" show-overflow-tooltip min-width="160"></el-table-column>
          <el-table-column prop="night2Name" label="值班员2" show-overflow-tooltip min-width="160"></el-table-column>
          <el-table-column prop="night2Phone" label="手机号码" show-overflow-tooltip min-width="160"></el-table-column>
        </el-table-column>

      </el-table>
    </div>
    <div id="pagination">
      <el-pagination :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background
                     layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page.sync="pageNum"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"></el-pagination>
    </div>

    <el-dialog v-model="dialog.visible"
               v-bind="{...dialog.innerAttrs}"
               v-on="dialog.events">
      <el-upload
          class="upload-demo"
          drag
          action="/api/entDutyList/importDutysExcel"
          :show-file-list="true"
          :on-success="handleSuccessResult"
          :before-upload="handleBeforeUpload"
      >
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div class="el-upload__text">
          拖拽Excel文件到这里或者 <em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
          </div>
        </template>
      </el-upload>

    </el-dialog>


  </section>
</template>
<script setup lang="ts">
import {ref, reactive, onMounted, getCurrentInstance} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import entDutyListApi from "@/request/api/entDutyList"

/**
 * --------------全局共享上下文引入--------------------------
 */
const global = getCurrentInstance().appContext.config.globalProperties;

/**
 * --------------状态变量定义--------------------------
 */
const searchForm = reactive({
  dutyStartDate: "",
  dutyEndDate: "",
  dutyPersonName: "",
  telephone: ""
});

// table 相关字段
const tableData = ref([]);
const loading = ref(false);
// 分页相关字段
const pageNum = ref(1);
const total = ref(0);
const pageSize = ref(10);

/**
 * --------------导入对话框--------------------------
 */

const dialog = ref({
  visible: false,
  innerAttrs: {
    id: 'EntDutyListDialog',
    class: 'EntDutyListDialog',
    title: '企业值班值守信息',
    width: "50%",
    top: '17vh'
  },
  events: {
    open: () => {
      console.log('dialog open.....');

    },
    close: () => {
      console.log('dialog close.....');

    },
  }
})


/**
 * --------------页面加载生命周期函数--------------------------
 */
onMounted(() => {
  queryData()
})


const handleQuery = () => {
  pageNum.value = 1
  queryData();

}


/**
 * --------------搜索功能--------------------------
 */
const queryData = () => {
  let data = Object.assign({}, searchForm, {pageNum: pageNum.value, pageSize: pageSize.value});
  let obj = global.$delUndefined(data);
  global.$api.getEntDutysPage(obj).then(({data}) => {
    if (data.status === 'OK') {
      tableData.value = data.data.list;
      total.value = data.data.total;
    }
  });
};
/**
 * --------------分页操作--------------------------
 */
const handleCurrentChange = val => {
  pageNum.value = val;
  // 调用查询方法
  queryData();
};
const handleSizeChange = val => {
  pageSize.value = val;
  queryData();
};


/**
 * --------------多选删除操作--------------------------
 */
// 多选操作 Id集合
const idList = ref([]);
const selectionChange = selection => {
  idList.value = selection.map((item) => item.id);

}
// 删除功能
const handleRemove = () => {
  if (idList.value.length === 0) {
    ElMessage({
      type: "info",
      message: "请选择至少一个信息记录",
    });
  } else {
    ElMessageBox.confirm(`是否删除${idList.value.length}个值班值守的详细信息？删除后不可恢复!`, "确认信息", {
      type: "warning",
      distinguishCancelAndClose: true,
      confirmButtonText: "删除",
      cancelButtonText: "取消",
    })
        .then(() => {
          global.$api
              .deleteDutysByIds({
                ids: idList.value,
              }).then(({data}) => {
            queryData();
            ElMessage({
              type: "success",
              message: "您已经成功删除了值班信息",
            });
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "您已经取消了删除操作",
          });
        });
  }
};


/**
 * --------------导入功能--------------------------
 */
const handleImport = () => {
  dialog.value.visible = true;


}

const   handleBeforeUpload=()=>{
    return true;
}


const handleSuccessResult = (val) => {
  if (val) {
    ElMessage.success("文件导入成功!");
    dialog.value.visible = false;
    handleQuery()
  } else {
    ElMessage.error("文件导入失败!");
  }
};

/**
 * --------------定义Excel头部  要跟--------------------------
 */
let tHeader = [
  {key: "parkName", name: "园区名称"},
  {key: "orgName", name: "所属单位名称"},
  {key: "dutyDate", name: "值班日期"},
  {key: "dayHeadName", name: "白班带班领导"},
  {key: "dayHeadPhone", name: "白班带班领导手机号码"},
  {key: "day1Name", name: "白班值班员1"},
  {key: "day1Phone", name: "白班值班员1手机号码"},
  {key: "day2Name", name: "白班值班员2"},
  {key: "day2Phone", name: "白班值班员2手机号码"},
  {key: "nightHeadName", name: "夜班带班领导"},
  {key: "nightHeadPhone", name: "夜班带班领导手机号码"},
  {key: "night1Name", name: "夜班值班员1"},
  {key: "night1Phone", name: "夜班值班员1手机号码"},
  {key: "night2Name", name: "夜班值班员2"},
  {key: "night2Phone", name: "夜班值班员2手机号码"},

];


/**
 * --------------下载模板--------------------------
 */
const downExcelTempate = () => {
  let excelObject = {
    fileName: "值班值守信息模板", //文件名
    tHeader: tHeader, //生成Excel表格的头部标题栏
    excelData: [], //需要导出Excel的数据集合
  };
  global.$exportExcel.exportExcel(excelObject);

}

/**
 * --------------导出功能--------------------------
 */
const onExport = () => {
  let data = Object.assign({}, searchForm, {});
  let obj = global.$delUndefined(data);
  global.$api.getEntDutysList(obj).then(({data}) => {
    if (data.status === 'OK') {
      let exportData = data.data;
      let excelObject = {
        fileName: "值班值守信息表", //文件名
        tHeader: tHeader, //生成Excel表格的头部标题栏
        excelData: exportData, //需要导出Excel的数据集合
      };
      global.$exportExcel.exportExcel(excelObject);

    }
  });


};
</script>